<template>
  <div class="weekend">
    <p class="title">周末去哪游</p>
    <div class="content" v-for="(v, i) in weekendList" :key="i">
      <img :src="v.imgUrl" alt="">
      <div class="text">
        <h3>{{v.title}}</h3>
        <p>{{v.desc}}</p>
        <button>查看详情</button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "weekend",
  data() {
    return {};
  },
  props: ["weekendList"]
};
</script>

<style scoped>
.weekend {
  margin-top: 0.2rem;
}
.title {
  background-color: #ccc;
  padding: 0.2rem;
}
.content {
  padding: 0 0.1rem 0;
  display: flex;
  flex-direction: column;
  /* border-bottom: 1px solid #ccc; */
}
.content img {
  width: 100%;
  height: 3rem;
}
.content .text {
  margin-top: 0.2rem;
}
.text h3 {
  font-weight: bold;
  font-size: 14px;
}
.text h3,
p,
button {
  margin-bottom: 0.2rem;
}
.text p {
  font-size: 12px;
  color: #666;
}
.text button {
  background-color: darkorange;
  width: 1.6rem;
  height: 0.4rem;
  border: none;
  border-radius: 5px;
  color: #fff;
  line-height: 0.4rem;
  font-weight: bold;
}
</style>